<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Dribbble Desktop Music Player</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://fonts.googleapis.com/css?family=Maven+Pro:400,700" rel="stylesheet">

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" type= "text/css" href="css/index.css"/>
    <script type="text/javascript" src="js/index.js"></script>
</head>

<body translate="no">
    <div class="center">
        <div class="left">
            <div class="controls">
                <div class="close"></div>
                <div class="minimize"></div>
                <div class="maximize"></div>
            </div>
            <div class="menu">
                <div class="title">MENU</div>
                <div class="item"><i class="material-icons">search</i><span>Explore</span></div>
                <div class="item"><i class="material-icons">layers</i><span>Genres</span></div>
                <div class="item"><i class="material-icons">radio</i><span>Radio</span></div>
                <div class="item"><i class="material-icons">mic</i><span>Artists</span></div>
                <div class="item"><i class="material-icons">album</i><span>Albums</span></div>
                <div class="item"><i class="material-icons">settings</i><span>Settings</span></div>
            </div>
            <div class="playlists">
                <div class="title">PLAYLISTS</div>
                <div class="item"><i class="material-icons">list</i><span>Liked</span></div>
                <div class="item"><i class="material-icons">list</i><span>Rap 2016</span></div>
                <div class="item"><i class="material-icons">list</i><span>Classic Music</span></div>
                <div class="item"><i class="material-icons">add_circle_outline</i><span>New Playlist</span></div>
            </div>
        </div>
        <div class="right">
            <div class="search"><i class="material-icons">search</i>
                <input placeholder="Find and listen to your favorate music...">
            </div>
            <div class="account"><i class="material-icons">notifications_none</i><img class="avatar"
                    src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/350523/profile/profile-80.jpg?1"></div>
            <div class="row">
                <h1>Featured Albums</h1>
                <button class="play"><span>PLAY</span><i class="material-icons">play_arrow</i></button>
            </div>
            <div class="albums">
                <div class="album"><img src="https://upload.wikimedia.org/wikipedia/en/d/d1/Rihanna_-_Loud.png">
                    <div class="album-title">Loud • Rihana</div>
                </div>
                <div class="album"><img src="https://upload.wikimedia.org/wikipedia/en/3/35/Flume_-_Skin.png">
                    <div class="album-title">Skin • Flume</div>
                </div>
                <div class="album"><img src="https://images.genius.com/a95fb19b13cc4891dccc94aae0c6b2df.640x640x1.jpg">
                    <div class="album-title">Illusion • Jubel</div>
                </div>
                <div class="album"><img src="https://upload.wikimedia.org/wikipedia/en/1/11/Dive_tycho_album.jpg">
                    <div class="album-title">Dive • Tycho</div>
                </div>
                <div class="album"><img src="https://upload.wikimedia.org/wikipedia/en/9/96/Future_cover.jpg">
                    <div class="album-title">Future • Future</div>
                </div>
                <div class="album"><img src="https://images.genius.com/27b630e743b1792609793ffc71699877.600x600x1.jpg">
                    <div class="album-title">Evil Twin • Guzior</div>
                </div>
            </div>
            <div class="split">
                <div class="daily-mix">
                    <h1>Daily Mix</h1>
                    <div class="song"><img src="https://upload.wikimedia.org/wikipedia/en/9/96/Future_cover.jpg">
                        <div>Mask Off</div>
                        <div>Future</div>
                        <div>Future</div>
                        <div class="duration">3:25</div>
                    </div>
                    <div class="song"><img src="https://upload.wikimedia.org/wikipedia/en/1/11/Dive_tycho_album.jpg">
                        <div>Daydream</div>
                        <div>Tycho</div>
                        <div>Dive</div>
                        <div class="duration">3:54</div>
                    </div>
                    <div class="song"><img
                            src="https://images.genius.com/a95fb19b13cc4891dccc94aae0c6b2df.640x640x1.jpg">
                        <div>Illusion</div>
                        <div>Jubel</div>
                        <div>Illusion</div>
                        <div class="duration">3:23</div>
                    </div>
                    <div class="song"><img src="https://upload.wikimedia.org/wikipedia/en/d/d1/Rihanna_-_Loud.png">
                        <div>Fading</div>
                        <div>Rihanna</div>
                        <div>Loud</div>
                        <div class="duration">4:31</div>
                    </div>
                </div>
                <div class="play-lists">
                    <h1>Playlists</h1>
                    <div class="playlist">
                        <div>Global Top 100</div><i class="material-icons">arrow_forward</i>
                    </div>
                    <div class="playlist">
                        <div>Acoustic Music</div><i class="material-icons">arrow_forward</i>
                    </div>
                    <div class="playlist">
                        <div>Songs For Sleep</div><i class="material-icons">arrow_forward</i>
                    </div>
                    <div class="playlist">
                        <div>Electronic Beats</div><i class="material-icons">arrow_forward</i>
                    </div>
                </div>
            </div>
            <div class="current-play">
                <div class="info"><img src="https://upload.wikimedia.org/wikipedia/en/1/11/Dive_tycho_album.jpg">
                    <div class="song">
                        <div class="name">Daydream</div>
                        <div class="artist">Tycho</div>
                    </div>
                </div>
                <div class="controls">
                    <div class="repeat"><i class="material-icons">repeat</i></div>
                    <div class="prev"><i class="material-icons">fast_rewind</i></div>
                    <div class="play"><i class="material-icons">play_arrow</i></div>
                    <div class="next"><i class="material-icons">fast_forward</i></div>
                    <div class="shuffle"><i class="material-icons">shuffle</i></div>
                </div>
                <div class="volume"><i class="material-icons">volume_up </i>
                    <div class="slider" role="slider">
                        <div class="slider__track-container">
                            <div class="slider__track"></div>
                        </div>
                        <div class="slider__thumb"></div>
                    </div>
                </div>
            </div>
        </div>
    </div><a class="inspiration" href="https://dribbble.com/shots/3935760-Desktop-Music-Player/attachments/897873"
        target="_blank">inspiration</a>
    <script
        src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js">
    </script>


    <script id="rendered-js">
        /*
    Inspired by: "Desktop Music Player"
    By: Filip Legierski
    Link: https://dribbble.com/shots/3935760-Desktop-Music-Player
  */
        //# sourceURL=pen.js
    </script>







</body>

</html>